<template>
    <!-- 控制按钮  -->
    <el-button class="sc-btn-minor sc-to-e">
        <el-popover
            ref="$popover"
            popper-class="sc-popper no-arrow sc-select-button-popper"
            placement="bottom-start"
            v-model="visiblePopper"
            trigger="manual"
        >
            <div @click.stop="visiblePopper = !visiblePopper" slot="reference">
                <i class="el-icon-caret-bottom"></i>
                {{ modelValue && getLabel(modelValue) }}
            </div>
            <!-- 弹出内容 -->
            <ul class="sc-select-button-ul">
                <!-- 选项 -->
                <li
                    class="sc-f"
                    v-for="item in options"
                    :key="getKey(item)"
                    @click="handleClick(item)"
                >
                    {{ getLabel(item) }}
                </li>
            </ul>
        </el-popover>

        <div>
            <slot></slot>
        </div>
    </el-button>
</template>
<script>
export default {
    name: "SelectButton",
    props: {
        /**
         * 下拉列表
         * 格式1：对象数组 value 值, label文字
         * 格式2：字符串数组
         * */
        options: {
            type: Array,
        },
        value: {
            type: Object,
        },
    },
    data() {
        return {
            visiblePopper: false,
        };
    },
    computed: {
        modelValue: {
            get() {
                return this.value;
            },
            set(newValue) {
                this.$emit("input", newValue);
            },
        },
    },
    methods: {
        handleClick(item) {
            this.modelValue = item;
            this.visiblePopper = false;
        },
        getKey(item) {
            if (Object.prototype.toString.call(item) === "[object Object]") {
                return item.key;
            }
            return item;
        },
        getLabel(item) {
            if (Object.prototype.toString.call(item) === "[object Object]") {
                return item.label;
            }
            return item;
        },
        closePopper(e) {
            this.visiblePopper = false;
        },
    },
    watch: {
        options: {
            immediate: true,
            handler(newValue) {
                if (newValue && newValue.length > 0) {
                    this.modelValue = newValue[0];
                }
            },
        },
    },
    mounted() {
        window.addEventListener("click", this.closePopper);
    },
    destroyed() {
        window.removeEventListener("click", this.closePopper);
    },
};
</script>

<style>
.sc-select-button-popper {
    margin-left: -12px;
    margin-top: 6px !important;
}
</style>
<style lang="scss" scoped>
.sc-btn-minor {
    width: 100%;
    max-width: 100%;
    text-align: left;
}
ul.sc-select-button-ul {
    user-select: none;
    width: 184px - 16px;
    padding: 0;
    margin: 0;
    li {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        border-radius: 4px;
        white-space: nowrap;
        cursor: pointer;
        --fontcolor: #adb1c2;
        --hoverfontcolor: #ffffff;
        /** 因为组件vue-context底层用了important,所以全都要用 */
        padding: 2px 12px;
        color: var(--fontcolor) !important;
        span,
        i {
            color: var(--fontcolor) !important;
        }
        // 聚焦的状态
        &:hover,
        &:focus {
            --fontcolor: #00a289;
            background-color: rgba(0, 162, 137, 0.08);
        }
    }
}
</style>